import React, { useState, useEffect } from 'react'
import { createSurvey, updateSurvey } from '../api/survey'
import './SurveyForm.css'

function SurveyForm({ survey, onSave, onCancel }) {
  const [currentPage, setCurrentPage] = useState(1)
  const totalPages = 5
  
  const [formData, setFormData] = useState({
    // 基本信息
    company_name: '',
    employee_count: '',
    main_business: '',
    security_risk: '',
    security_risk_other: '',
    security_incident: '',
    security_incident_detail: '',
    audit_expectation: '',
    // 组织管理
    security_policy: '',
    security_officer: '',
    security_officer_position: '',
    // 人员管理
    it_team_size: '',
    it_team_division: '',
    it_outsource: '',
    it_outsource_scope: '',
    security_staff: '',
    security_staff_name: '',
    confidentiality_agreement: '',
    account_revoke: '',
    security_training: '',
    security_training_freq: '',
    // 物理环境
    visitor_management: '',
    important_area_control: '',
    device_borrow: '',
    // 基础设施
    important_systems: '',
    deployment_mode: '',
    database_type: '',
    database_type_other: '',
    network_planning: '',
    remote_work: '',
    internet_exit_count: '',
    internet_bandwidth: '',
    data_backup: '',
  })
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (survey) {
      setFormData({
        company_name: survey.company_name || '',
        employee_count: survey.employee_count || '',
        main_business: survey.main_business || '',
        security_risk: survey.security_risk || '',
        security_risk_other: survey.security_risk_other || '',
        security_incident: survey.security_incident || '',
        security_incident_detail: survey.security_incident_detail || '',
        audit_expectation: survey.audit_expectation || '',
        security_policy: survey.security_policy || '',
        security_officer: survey.security_officer || '',
        security_officer_position: survey.security_officer_position || '',
        it_team_size: survey.it_team_size || '',
        it_team_division: survey.it_team_division || '',
        it_outsource: survey.it_outsource || '',
        it_outsource_scope: survey.it_outsource_scope || '',
        security_staff: survey.security_staff || '',
        security_staff_name: survey.security_staff_name || '',
        confidentiality_agreement: survey.confidentiality_agreement || '',
        account_revoke: survey.account_revoke || '',
        security_training: survey.security_training || '',
        security_training_freq: survey.security_training_freq || '',
        visitor_management: survey.visitor_management || '',
        important_area_control: survey.important_area_control || '',
        device_borrow: survey.device_borrow || '',
        important_systems: survey.important_systems || '',
        deployment_mode: survey.deployment_mode || '',
        database_type: survey.database_type || '',
        database_type_other: survey.database_type_other || '',
        network_planning: survey.network_planning || '',
        remote_work: survey.remote_work || '',
        internet_exit_count: survey.internet_exit_count || '',
        internet_bandwidth: survey.internet_bandwidth || '',
        data_backup: survey.data_backup || '',
      })
    }
  }, [survey])

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

  const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1)
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }

  const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1)
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }

  const goToPage = (page) => {
    setCurrentPage(page)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  const handleSubmit = async (e) => {
    e.preventDefault()

    // 验证必填字段
    const requiredFields = [
      { field: 'company_name', label: '公司名称（全称）' },
      { field: 'employee_count', label: '员工人数' },
      { field: 'main_business', label: '主营业务' },
      { field: 'security_risk', label: '最担心的安全风险' },
      { field: 'security_incident', label: '是否发生过安全事件' },
      { field: 'audit_expectation', label: '期望通过审计解决什么问题' },
      { field: 'security_policy', label: '是否制定了信息安全相关制度' },
      { field: 'security_officer', label: '是否指定了信息安全责任人' },
      { field: 'it_team_size', label: 'IT团队人数' },
      { field: 'it_team_division', label: 'IT团队分工' },
      { field: 'it_outsource', label: '是否有IT外包' },
      { field: 'security_staff', label: '是否有专门负责安全的人' },
      { field: 'confidentiality_agreement', label: '新员工是否签署保密协议' },
      { field: 'account_revoke', label: '员工离职账号权限处理' },
      { field: 'security_training', label: '是否开展信息安全培训' },
      { field: 'visitor_management', label: '外来人员如何管理' },
      { field: 'important_area_control', label: '财务室机房等是否单独管控' },
      { field: 'device_borrow', label: '公司设备是否有借用管理' },
      { field: 'important_systems', label: '重要系统列表' },
      { field: 'deployment_mode', label: '系统部署方式' },
      { field: 'database_type', label: '数据库类型' },
      { field: 'network_planning', label: '办公网络规划' },
      { field: 'remote_work', label: '员工如何远程办公' },
      { field: 'internet_exit_count', label: '互联网出口数量' },
      { field: 'internet_bandwidth', label: '互联网带宽' },
      { field: 'data_backup', label: '重要数据备份方式' },
    ]

    for (const { field, label } of requiredFields) {
      if (!formData[field] || !formData[field].toString().trim()) {
        alert(`请填写：${label}`)
        return
      }
    }

    setLoading(true)
    try {
      if (survey) {
        await updateSurvey(survey.id, formData)
      } else {
        await createSurvey(formData)
      }
      onSave()
    } catch (error) {
      console.error('保存失败：', error)
      alert('保存失败：' + (error.response?.data?.message || error.message))
    } finally {
      setLoading(false)
    }
  }

  const pageNames = {
    1: '基本信息',
    2: '组织管理',
    3: '人员管理',
    4: '物理环境',
    5: '基础设施'
  }

  return (
    <div className="survey-form-container">
      <div className="form-header">
        <h2>企业信息安全审计问卷</h2>
        <div className="page-indicator">
          第 {currentPage} / {totalPages} 页：{pageNames[currentPage]}
        </div>
      </div>

      {/* 分页导航 */}
      <div className="pagination-dots">
        {[1, 2, 3, 4, 5].map(page => (
          <div
            key={page}
            className={`dot ${currentPage === page ? 'active' : ''} ${
              formData.company_name ? 'filled' : ''
            }`}
            onClick={() => goToPage(page)}
            title={pageNames[page]}
          >
            {page}
          </div>
        ))}
      </div>

      <form className="survey-form" onSubmit={handleSubmit}>
        {/* 第1页：基本信息 */}
        {currentPage === 1 && (
          <div className="form-section active-page">
            <h3 className="section-title">一、基本信息</h3>
            
            <div className="form-group">
              <label htmlFor="company_name">
                1. 公司名称（全称）<span className="required">*</span>
              </label>
              <input
                type="text"
                id="company_name"
                name="company_name"
                value={formData.company_name}
                onChange={handleChange}
                placeholder="请输入公司全称"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="employee_count">
                2. 员工人数<span className="required">*</span>
              </label>
              <input
                type="text"
                id="employee_count"
                name="employee_count"
                value={formData.employee_count}
                onChange={handleChange}
                placeholder="例如：50人"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="main_business">
                3. 主营业务（3-5句描述）<span className="required">*</span>
              </label>
              <textarea
                id="main_business"
                name="main_business"
                value={formData.main_business}
                onChange={handleChange}
                placeholder="请简要描述公司主营业务"
                rows="4"
                required
              />
            </div>

            <div className="form-group">
              <label>4. 最担心的安全风险<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_risk"
                    value="数据泄露"
                    checked={formData.security_risk === '数据泄露'}
                    onChange={handleChange}
                  />
                  数据泄露
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_risk"
                    value="系统故障"
                    checked={formData.security_risk === '系统故障'}
                    onChange={handleChange}
                  />
                  系统故障
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_risk"
                    value="网络攻击"
                    checked={formData.security_risk === '网络攻击'}
                    onChange={handleChange}
                  />
                  网络攻击
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_risk"
                    value="员工违规"
                    checked={formData.security_risk === '员工违规'}
                    onChange={handleChange}
                  />
                  员工违规
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_risk"
                    value="其他"
                    checked={formData.security_risk === '其他'}
                    onChange={handleChange}
                  />
                  其他
                </label>
              </div>
              {formData.security_risk === '其他' && (
                <input
                  type="text"
                  name="security_risk_other"
                  value={formData.security_risk_other}
                  onChange={handleChange}
                  placeholder="请说明其他风险"
                  className="sub-input"
                />
              )}
            </div>

            <div className="form-group">
              <label>5. 是否发生过安全事件<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_incident"
                    value="是"
                    checked={formData.security_incident === '是'}
                    onChange={handleChange}
                  />
                  是
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_incident"
                    value="否"
                    checked={formData.security_incident === '否'}
                    onChange={handleChange}
                  />
                  否
                </label>
              </div>
              {formData.security_incident === '是' && (
                <textarea
                  name="security_incident_detail"
                  value={formData.security_incident_detail}
                  onChange={handleChange}
                  placeholder="请具体说明安全事件"
                  rows="3"
                  className="sub-input"
                />
              )}
            </div>

            <div className="form-group">
              <label htmlFor="audit_expectation">
                6. 期望通过审计解决什么问题<span className="required">*</span>
              </label>
              <textarea
                id="audit_expectation"
                name="audit_expectation"
                value={formData.audit_expectation}
                onChange={handleChange}
                placeholder="请描述您期望通过审计解决的问题"
                rows="4"
                required
              />
            </div>
          </div>
        )}

        {/* 第2页：组织管理 */}
        {currentPage === 2 && (
          <div className="form-section active-page">
            <h3 className="section-title">二、组织管理</h3>
            
            <div className="form-group">
              <label>1. 是否制定了信息安全相关制度？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_policy"
                    value="有完整制度"
                    checked={formData.security_policy === '有完整制度'}
                    onChange={handleChange}
                  />
                  有完整制度
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_policy"
                    value="有部分制度"
                    checked={formData.security_policy === '有部分制度'}
                    onChange={handleChange}
                  />
                  有部分制度
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_policy"
                    value="正在制定"
                    checked={formData.security_policy === '正在制定'}
                    onChange={handleChange}
                  />
                  正在制定
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_policy"
                    value="无"
                    checked={formData.security_policy === '无'}
                    onChange={handleChange}
                  />
                  无
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>2. 是否指定了信息安全责任人？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_officer"
                    value="有"
                    checked={formData.security_officer === '有'}
                    onChange={handleChange}
                  />
                  有
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_officer"
                    value="无"
                    checked={formData.security_officer === '无'}
                    onChange={handleChange}
                  />
                  无
                </label>
              </div>
              {formData.security_officer === '有' && (
                <input
                  type="text"
                  name="security_officer_position"
                  value={formData.security_officer_position}
                  onChange={handleChange}
                  placeholder="职位："
                  className="sub-input"
                />
              )}
            </div>
          </div>
        )}

        {/* 第3页：人员管理 */}
        {currentPage === 3 && (
          <div className="form-section active-page">
            <h3 className="section-title">三、人员管理</h3>
            
            <div className="form-group">
              <label htmlFor="it_team_size">
                1. IT团队有几个人？<span className="required">*</span>
              </label>
              <input
                type="text"
                id="it_team_size"
                name="it_team_size"
                value={formData.it_team_size}
                onChange={handleChange}
                placeholder="例如：5人"
                required
              />
            </div>

            <div className="form-group">
              <label htmlFor="it_team_division">
                2. IT团队分工<span className="required">*</span>
              </label>
              <textarea
                id="it_team_division"
                name="it_team_division"
                value={formData.it_team_division}
                onChange={handleChange}
                placeholder="请描述IT团队的分工"
                rows="3"
                required
              />
            </div>

            <div className="form-group">
              <label>3. 是否有IT外包？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="it_outsource"
                    value="有"
                    checked={formData.it_outsource === '有'}
                    onChange={handleChange}
                  />
                  有
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="it_outsource"
                    value="无"
                    checked={formData.it_outsource === '无'}
                    onChange={handleChange}
                  />
                  无
                </label>
              </div>
              {formData.it_outsource === '有' && (
                <textarea
                  name="it_outsource_scope"
                  value={formData.it_outsource_scope}
                  onChange={handleChange}
                  placeholder="范围："
                  rows="2"
                  className="sub-input"
                />
              )}
            </div>

            <div className="form-group">
              <label>4. 是否有专门负责安全的人？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_staff"
                    value="有"
                    checked={formData.security_staff === '有'}
                    onChange={handleChange}
                  />
                  有
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_staff"
                    value="无"
                    checked={formData.security_staff === '无'}
                    onChange={handleChange}
                  />
                  无
                </label>
              </div>
              {formData.security_staff === '有' && (
                <input
                  type="text"
                  name="security_staff_name"
                  value={formData.security_staff_name}
                  onChange={handleChange}
                  placeholder="姓名："
                  className="sub-input"
                />
              )}
            </div>

            <div className="form-group">
              <label>5. 新员工入职时是否签署保密协议？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="confidentiality_agreement"
                    value="都签署"
                    checked={formData.confidentiality_agreement === '都签署'}
                    onChange={handleChange}
                  />
                  都签署
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="confidentiality_agreement"
                    value="重要岗位签署"
                    checked={formData.confidentiality_agreement === '重要岗位签署'}
                    onChange={handleChange}
                  />
                  重要岗位签署
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="confidentiality_agreement"
                    value="不签署"
                    checked={formData.confidentiality_agreement === '不签署'}
                    onChange={handleChange}
                  />
                  不签署
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>6. 员工离职时如何处理账号权限？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="account_revoke"
                    value="当天回收"
                    checked={formData.account_revoke === '当天回收'}
                    onChange={handleChange}
                  />
                  当天回收
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="account_revoke"
                    value="几天内回收"
                    checked={formData.account_revoke === '几天内回收'}
                    onChange={handleChange}
                  />
                  几天内回收
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="account_revoke"
                    value="不处理"
                    checked={formData.account_revoke === '不处理'}
                    onChange={handleChange}
                  />
                  不处理
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>7. 是否开展信息安全培训？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_training"
                    value="定期培训"
                    checked={formData.security_training === '定期培训'}
                    onChange={handleChange}
                  />
                  定期培训
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_training"
                    value="入职培训"
                    checked={formData.security_training === '入职培训'}
                    onChange={handleChange}
                  />
                  入职培训
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="security_training"
                    value="无培训"
                    checked={formData.security_training === '无培训'}
                    onChange={handleChange}
                  />
                  无培训
                </label>
              </div>
              {(formData.security_training === '定期培训' || formData.security_training === '入职培训') && (
                <input
                  type="text"
                  name="security_training_freq"
                  value={formData.security_training_freq}
                  onChange={handleChange}
                  placeholder={
                    formData.security_training === '定期培训' 
                      ? '频率：三月一次？半年一次？一年一次？其他______' 
                      : '时间：入职后一个月？入职后半年？其他______'
                  }
                  className="sub-input"
                />
              )}
            </div>
          </div>
        )}

        {/* 第4页：物理环境 */}
        {currentPage === 4 && (
          <div className="form-section active-page">
            <h3 className="section-title">四、物理环境</h3>
            
            <div className="form-group">
              <label>1. 外来人员如何管理？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="visitor_management"
                    value="严格登记"
                    checked={formData.visitor_management === '严格登记'}
                    onChange={handleChange}
                  />
                  严格登记
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="visitor_management"
                    value="简单登记"
                    checked={formData.visitor_management === '简单登记'}
                    onChange={handleChange}
                  />
                  简单登记
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="visitor_management"
                    value="自由出入"
                    checked={formData.visitor_management === '自由出入'}
                    onChange={handleChange}
                  />
                  自由出入
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>2. 财务室、机房等是否单独管控？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="important_area_control"
                    value="是"
                    checked={formData.important_area_control === '是'}
                    onChange={handleChange}
                  />
                  是
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="important_area_control"
                    value="否"
                    checked={formData.important_area_control === '否'}
                    onChange={handleChange}
                  />
                  否
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="important_area_control"
                    value="无重要区域"
                    checked={formData.important_area_control === '无重要区域'}
                    onChange={handleChange}
                  />
                  无重要区域
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>3. 公司设备是否有借用管理？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="device_borrow"
                    value="有流程"
                    checked={formData.device_borrow === '有流程'}
                    onChange={handleChange}
                  />
                  有流程
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="device_borrow"
                    value="口头申请"
                    checked={formData.device_borrow === '口头申请'}
                    onChange={handleChange}
                  />
                  口头申请
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="device_borrow"
                    value="无管理"
                    checked={formData.device_borrow === '无管理'}
                    onChange={handleChange}
                  />
                  无管理
                </label>
              </div>
            </div>
          </div>
        )}

        {/* 第5页：基础设施 */}
        {currentPage === 5 && (
          <div className="form-section active-page">
            <h3 className="section-title">五、基础设施</h3>
            
            <div className="form-group">
              <label htmlFor="important_systems">
                1. 哪些是公司重要系统？<span className="required">*</span>
              </label>
              <textarea
                id="important_systems"
                name="important_systems"
                value={formData.important_systems}
                onChange={handleChange}
                placeholder="请列出重要系统，例如：&#10;1. ERP系统&#10;2. 财务系统&#10;3. 客户管理系统"
                rows="5"
                required
              />
            </div>

            <div className="form-group">
              <label>2. 系统主要部署在哪里？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="deployment_mode"
                    value="本地机房"
                    checked={formData.deployment_mode === '本地机房'}
                    onChange={handleChange}
                  />
                  本地机房
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="deployment_mode"
                    value="云服务器"
                    checked={formData.deployment_mode === '云服务器'}
                    onChange={handleChange}
                  />
                  云服务器
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="deployment_mode"
                    value="混合部署"
                    checked={formData.deployment_mode === '混合部署'}
                    onChange={handleChange}
                  />
                  混合部署
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>3. 主要使用什么数据库？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="database_type"
                    value="MySQL"
                    checked={formData.database_type === 'MySQL'}
                    onChange={handleChange}
                  />
                  MySQL
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="database_type"
                    value="SQL Server"
                    checked={formData.database_type === 'SQL Server'}
                    onChange={handleChange}
                  />
                  SQL Server
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="database_type"
                    value="Oracle"
                    checked={formData.database_type === 'Oracle'}
                    onChange={handleChange}
                  />
                  Oracle
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="database_type"
                    value="其他"
                    checked={formData.database_type === '其他'}
                    onChange={handleChange}
                  />
                  其他
                </label>
              </div>
              {formData.database_type === '其他' && (
                <input
                  type="text"
                  name="database_type_other"
                  value={formData.database_type_other}
                  onChange={handleChange}
                  placeholder="请说明其他数据库类型"
                  className="sub-input"
                />
              )}
            </div>

            <div className="form-group">
              <label>4. 办公网络如何规划？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="network_planning"
                    value="内外网分离"
                    checked={formData.network_planning === '内外网分离'}
                    onChange={handleChange}
                  />
                  内外网分离
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="network_planning"
                    value="统一网络"
                    checked={formData.network_planning === '统一网络'}
                    onChange={handleChange}
                  />
                  统一网络
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="network_planning"
                    value="不清楚"
                    checked={formData.network_planning === '不清楚'}
                    onChange={handleChange}
                  />
                  不清楚
                </label>
              </div>
            </div>

            <div className="form-group">
              <label>5. 员工如何远程办公？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="remote_work"
                    value="VPN"
                    checked={formData.remote_work === 'VPN'}
                    onChange={handleChange}
                  />
                  VPN
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="remote_work"
                    value="远程桌面"
                    checked={formData.remote_work === '远程桌面'}
                    onChange={handleChange}
                  />
                  远程桌面
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="remote_work"
                    value="直接访问"
                    checked={formData.remote_work === '直接访问'}
                    onChange={handleChange}
                  />
                  直接访问
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="remote_work"
                    value="不支持"
                    checked={formData.remote_work === '不支持'}
                    onChange={handleChange}
                  />
                  不支持
                </label>
              </div>
            </div>

            <div className="form-group">
              <label htmlFor="internet_exit_count">
                6. 有几个互联网出口？带宽多少？<span className="required">*</span>
              </label>
              <div className="inline-group">
                <input
                  type="text"
                  id="internet_exit_count"
                  name="internet_exit_count"
                  value={formData.internet_exit_count}
                  onChange={handleChange}
                  placeholder="个"
                  style={{ width: '100px' }}
                  required
                />
                <span style={{ margin: '0 10px' }}>个，带宽</span>
                <input
                  type="text"
                  name="internet_bandwidth"
                  value={formData.internet_bandwidth}
                  onChange={handleChange}
                  placeholder="M"
                  style={{ width: '100px' }}
                  required
                />
              </div>
            </div>

            <div className="form-group">
              <label>7. 重要数据如何备份？<span className="required">*</span></label>
              <div className="radio-group">
                <label className="radio-label">
                  <input
                    type="radio"
                    name="data_backup"
                    value="自动备份"
                    checked={formData.data_backup === '自动备份'}
                    onChange={handleChange}
                  />
                  自动备份
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="data_backup"
                    value="手工备份"
                    checked={formData.data_backup === '手工备份'}
                    onChange={handleChange}
                  />
                  手工备份
                </label>
                <label className="radio-label">
                  <input
                    type="radio"
                    name="data_backup"
                    value="无备份"
                    checked={formData.data_backup === '无备份'}
                    onChange={handleChange}
                  />
                  无备份
                </label>
              </div>
            </div>
          </div>
        )}

        {/* 分页按钮 */}
        <div className="pagination-buttons">
          <button
            type="button"
            className="btn btn-secondary"
            onClick={handlePrevPage}
            disabled={currentPage === 1}
          >
            ← 上一页
          </button>
          
          {currentPage < totalPages ? (
            <button
              type="button"
              className="btn btn-primary"
              onClick={handleNextPage}
            >
              下一页 →
            </button>
          ) : (
            <button
              type="submit"
              className="btn btn-success"
              disabled={loading}
            >
              {loading ? '提交中...' : '提交问卷'}
            </button>
          )}
        </div>
      </form>
    </div>
  )
}

export default SurveyForm
